<template>
	<view>
		<!-- orderSub/pages/search/search.wxml -->
		<view class="search">
			<view class="search_box">
				<!-- 搜索框 -->
				<view class="weui-search-bar">
					<view class="weui-search-bar__form">
						<!-- 点击之后，出现input框 -->
						<view class="weui-search-bar__box">
							<view class="weui-icon-search_in-box">
								<image class="img1"
									src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/search.png">
								</image>
							</view>
							<input type="text" class="weui-search-bar__input" placeholder="输入站点名称/桩号搜索"
								:value="searchtxt" @input="inputTyping" confirm-type="search" @confirm="searchclk" />
							<!-- 输入款字数大于0，则显示清除按钮 -->
							<view class="weui-icon-clear" v-if="searchtxt.length > 0" @tap="clearInput">
								<icon type="clear" size="16"></icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="search_txt" @tap="searchclk">搜索</view>
		</view>
		<view class="kobai"></view>
		<!-- 历史搜索 -->
		<view class="search_history" v-if="history.length > 0">
			<view class="tit">
				<view class="txt1">历史搜索</view>
				<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/del.png"
					@tap="clearhis"></image>
			</view>
			<scroll-view :scroll-x="true" style="margin-top: 31rpx">
				<view class="searchTag_box">
					<view :data-index="index" @tap="clk_sel" v-for="(item, index) in history" :key="index">
						<text class="searchTag">{{ item }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- <view class="search_history" wx:if="{{searchArr.length}}">
	<view class="searchCon" wx:for="{{searchArr}}" wx:key="index" bindtap="goDetails" data-index="{{item}}">{{item.stationName}}</view>
</view> -->
		<view v-if="!orderList || !orderList.length" class="noList">暂无搜索相关内容，请更换关键词重试</view>

		<!-- 空信息 -->
		<!-- <Upgrading text="暂无站点"></Upgrading> -->

		<!-- 订单列表 -->
		<view class="order-list">
			<view v-if="orderList.length > 0">
				<view class="order-list-item" @tap="goDetails" :data-index="item" v-for="(item, index) in orderList"
					:key="index">
					<view class="order-list-top">
						<view class="siteName" @tap.stop.prevent="goSite" :data-index="item">{{ item.stationName }}
						</view>
						<view class="status"
							:style="'color:' + (item.type == 1 ? '#1487FA' : item.type == 2 ? '#F7A14A' : item.type == 3 ? '#72C23D' : '#909399')">
							{{ item.type == 1 ? '进行中' : item.type == 2 ? '待支付' : item.type == 3 ? '已完成' : '已关闭' }}
						</view>
					</view>

					<view class="order-list-center">
						<view class="order-list-center-left">
							<image
								:src="item.stationIcon ? item.stationIcon : 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/pic.png'"
								class="order-img"></image>
							<view>
								<view class="gun-number">{{ item.pileName }}-{{ item.gunName }}</view>
								<view class="degree">
									<text>￥</text>
									{{ item.type == 1 ? '--' : item.actualBalance }}
								</view>
								<!-- <text>/度</text> -->
								<view class="period-time">
									{{ item.startTime }}
									<text v-if="item.type != 1">{{ item.endTime ? ' - ' + item.endTime : '' }}</text>
								</view>
							</view>
						</view>
						<image
							:src="item.isSuper ? 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/superCharge.png' : 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/slowCharge.png'"
							class="charge-type"></image>
					</view>

					<view class="order-list-bottom">
						<view class="order-list-bottom-left">
							<text class="order-type">充电订单</text>
							<text class="account-type"
								:style="'color:' + (item.memberType == 1 ? 'orange' : item.memberType == 2 ? 'orange' : 'green') + ';'">
								{{ item.memberType == 1 ? '个人账号' : item.memberType == 2 ? '车队账号' : '微信支付积分' }}
							</text>
						</view>
						<!-- wx:if="{{item.operatingState}}" -->
						<view class="operate-state" @tap.stop.prevent="operation" :data-index="item"
							:style="'color:' + (item.type == 1 ? gray : blue) + ';border: 1rpx solid ' + (item.type == 1 ? gray : blue) + ';'">
							{{ item.type == 1 ? '充电结束' : item.type == 2 ? '去支付' : '再次充电' }}
						</view>
					</view>
				</view>
			</view>
			<!-- <view wx:else>
            <upgrading text="{{shownNoList?'暂无搜索相关内容，请更换关键词重试':'请输入站点/桩号搜索'}}"></upgrading>
        </view> -->
		</view>
		<view v-if="loadAll" class="noList">{{ tips }}</view>
	</view>
</template>

<script>
	'use strict';
	import upgrading from '../../../components/upgrading/upgrading';

	var __assign =
		(this && this.__assign) ||
		function() {
			__assign =
				Object.assign ||
				function(t) {
					for (var s, i = 1, n = arguments.length; i < n; i++) {
						s = arguments[i];

						for (var p in s) {
							if (Object.prototype.hasOwnProperty.call(s, p)) {
								t[p] = s[p];
							}
						}
					}

					return t;
				};

			return __assign.apply(this, arguments);
		};

	// exports.__esModule = true; // orderSub/pages/search/search.ts

	var app = getApp();

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			upgrading
		},
		// 生命周期函数--监听页面加载
		data() {
			return {
				marketingSwitch: app.globalData.marketingSwitch,
				searchtxt: '',
				history: [],
				shownNoList: false,
				kong: false,
				searchArr: [],
				orderList: [],

				// 订单状态
				orderStatus: [{
						state: '1',
						val: 1
					},
					{
						state: '2',
						val: 1
					},
					{
						state: '3',
						val: 1
					},
					{
						state: '4',
						val: 1
					},
					{
						state: '5',
						val: 1
					},
					{
						state: '6',
						val: 1
					},
					{
						state: '7',
						val: 1
					},
					{
						state: '8',
						val: 1
					},
					{
						state: '9',
						val: 1
					},
					{
						state: '10',
						val: 2
					},
					{
						state: '11',
						val: 2
					},
					{
						state: '12',
						val: 2
					},
					{
						state: '13',
						val: 2
					},
					{
						state: '14',
						val: 3
					},
					{
						state: '15',
						val: 2
					},
					{
						state: '16',
						val: 4
					},
					{
						state: '17',
						val: 3
					},
					{
						state: '18',
						val: 4
					}
				],

				queryParam: {
					current: 1,
					size: 10
				},

				page: 1,
				loadAll: true,

				guns: [{
						value: 0,
						name: 'A'
					},
					{
						value: 1,
						name: 'B'
					},
					{
						value: 2,
						name: 'C'
					},
					{
						value: 3,
						name: 'D'
					},
					{
						value: 4,
						name: 'E'
					},
					{
						value: 5,
						name: 'F'
					},
					{
						value: 6,
						name: 'G'
					},
					{
						value: 7,
						name: 'H'
					},
					{
						value: 8,
						name: 'I'
					},
					{
						value: 9,
						name: 'J'
					},
					{
						value: 10,
						name: 'K'
					},
					{
						value: 11,
						name: 'L'
					},
					{
						value: 12,
						name: 'M'
					},
					{
						value: 13,
						name: 'N'
					},
					{
						value: 14,
						name: 'O'
					},
					{
						value: 15,
						name: 'P'
					},
					{
						value: 16,
						name: 'Q'
					},
					{
						value: 17,
						name: 'R'
					},
					{
						value: 18,
						name: 'S'
					},
					{
						value: 19,
						name: 'T'
					},
					{
						value: 20,
						name: 'U'
					},
					{
						value: 21,
						name: 'V'
					},
					{
						value: 22,
						name: 'W'
					},
					{
						value: 23,
						name: 'X'
					},
					{
						value: 24,
						name: 'Y'
					},
					{
						value: 25,
						name: 'Z'
					}
				],

				tips: '',
				gray: '',
				blue: ''
			};
		},
		onLoad: function() {
			var that = this;
			var order = uni.getStorageSync('order');

			if (order != '' && order != undefined && order != null) {
				that.setData({
					history: order
				});
			}

			uni.hideLoading(); // 城市
		},
		// 生命周期函数--监听页面显示
		onShow: function() {},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (this.queryParam.current == this.page) {
				// 到底
				this.setData({
					loadAll: true,
					tips: '已加载全部订单！'
				});
			} else {
				this.setData({
					queryParam: {
						current: ++this.queryParam.current,
						size: 10
					}
				});
				this.search();
			}
		},
		methods: {
			//搜索
			hideInput: function() {
				this.setData({
					searchtxt: ''
				});
			},

			clearInput: function() {
				this.setData({
					searchtxt: ''
				});
			},

			inputTyping: function(e) {
				//搜索数据
				this.setData({
					searchtxt: e.detail.value
				});
			},

			//点击历史
			clk_sel: function(e) {
				var index = e.currentTarget.dataset.index;
				var txt = this.history[index];
				this.setData({
					searchtxt: txt
				});
				this.searchclk();
			},

			//删除历史记录
			clk_del: function(e) {
				var index = e.currentTarget.dataset.index;
				var history = this.history;

				if (history.length == 1) {
					history = [];
					uni.setStorageSync('order', history);
					this.setData({
						history: []
					});
				} else {
					history.splice(index, 1);
					uni.setStorageSync('order', history);
					this.setData({
						history: history
					});
				}
			},

			//清除历史记录
			clearhis: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定清空历史搜索记录吗？',
					confirmText: '确认',
					cancelText: '取消',
					confirmColor: that.objColor2.textColor,
					success: function(res) {
						if (res.confirm) {
							var history = that.history;
							history = [];
							uni.setStorageSync('order', history);
							that.setData({
								history: history
							});
						}
					}
				});
			},

			// 搜索
			searchclk: function() {
				this.setData({
					queryParam: {
						current: 1,
						size: 10
					},
					orderList: [],
					page: 1,
					loadAll: false
				});
				this.getJson();
				this.search();
			},

			goDetails: function(e) {
				if (e.currentTarget.dataset.index.type == 1) {
					// 进行中，跳转到充电中页面
				} else {
					if (!this.marketingSwitch) {
						uni.navigateTo({
							url: '../orderDetails/orderDetails?orderId=' + e.currentTarget.dataset.index.id +
								'&type=' + e.currentTarget.dataset.index.type
						});
					} else {
						uni.navigateTo({
							url: '../orderDetailsYxhk/orderDetailsYxhk?orderId=' + e.currentTarget.dataset
								.index.id + '&type=' + e.currentTarget.dataset.index.type
						});
					}
					// uni.navigateTo({
					//     url: '../orderDetails/orderDetails?orderId=' + e.currentTarget.dataset.index.id + '&type=' + e.currentTarget.dataset.index.type
					// });
				}
			},

			// 获取站点
			getJson: function() {
				var searchtxt = this.searchtxt;

				if (searchtxt != '') {
					var $this = this; // 添加历史

					var history = $this.history;

					if (searchtxt != '') {
						//防止重复
						for (var i = 0; i < history.length; i++) {
							if (history[i] == searchtxt) {
								history.splice(i, 1);
							}
						} //防止大于10个

						if (history.length >= 19) {
							history.pop();
						}

						history.splice(0, 0, searchtxt);
						uni.setStorageSync('order', history);
					}

					this.setData({
						history: history
					});
				}
			},

			// 搜索的站点
			search: function() {
				var that = this;

				var operaeForm = __assign({
						startTime: null,
						endTime: null,
						memberType: null,
						billStatusList: null,
						searchBarCondition: this.searchtxt
					},
					this.queryParam
				);

				https_1.myBillPage(operaeForm).then(function(res) {
					if (res.code == 0) {
						if (res.data) {
							var list_1 = that.orderList;
							var number_1 = 0;
							res.data.records.map(function(item) {
								item.type = that.judgmentState(item.billStatus);
								item.startTime = item.timeS.substring(0, item.timeS.lastIndexOf(
									':'));

								if (item.timeE) {
									item.endTime = item.timeE.substring(0, item.timeS.lastIndexOf(
										':'));
								} else {
									item.endTime = null;
								}

								item.actualBalance = that.regFenToYuan(item.actualBalance);

								if (!item.gunName) {
									item.gunName = that.guns[item.gunNumber].name;
								}

								list_1.push(item);

								if (item.type == 1) {
									++number_1;
								}
							});


							// wx.navigateTo({
							//   url:'../../orderSub/pages/order/order'
							// })
							that.setData({
								orderList: list_1,
								page: res.data.pages,
								shownNoList: true
							});
						}

					}
				});
			},

			// 判断订单状态
			judgmentState: function(e) {
				var type = '';
				this.orderStatus.map(function(item) {
					if (e == item.state) {
						type = item.val;
					}
				});
				return type;
			},

			// 分转元
			regFenToYuan: function(fen) {
				var num = fen;
				num = fen * 0.01;
				num += '';
				var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
				num = num.replace(reg, '$1'); // num = toDecimal2(num)

				return Number(num).toFixed(2);
			},

			// 订单操作
			operation: function(e) {
				var order = e.currentTarget.dataset.index;
				var that = this
				if (e.currentTarget.dataset.index.type == 3) {
					// wx.navigateTo({
					//   url:'/homeSub/pages/terminal/pileDetail/pileDetail?pileNo='+e.currentTarget.dataset.index.pileNum
					// })
					uni.navigateTo({
						url: '/homeSub/pages/siteDetail/siteDetail?stationId=' + e.currentTarget.dataset.index
							.stationId
					});
				} else if (e.currentTarget.dataset.index.type == 1) {
					uni.navigateTo({
						url: '/echartsPages/pages/power/power?busId=' + order.busId + '&pileNo=' + order
							.pileNum + '&gunNo=' + order.gunNumber
					});
				} else if (e.currentTarget.dataset.index.type == 2) {
					if (!that.marketingSwitch) {
						uni.navigateTo({
							url: '../orderSettlement/orderSettlement?busId=' + order.busId
						});
					} else {
						uni.navigateTo({
							url: '../orderSettlementYxhk/orderSettlement?busId=' + order.busId
						});
					}
					// uni.navigateTo({
					//     url: '../orderSettlement/orderSettlement?busId=' + order.busId
					// });
				}
			},

			goSite() {
				console.log('占位：函数 goSite 未声明');
			}
		}
	};
</script>
<style lang="less">
	/* orderSub/pages/search/search.wxss */
	@import "../../../commin/commin.less";

	page {
		background-color: #F5F7FA;
	}

	.show {
		display: block;
	}

	.hide {
		display: none;
	}

	.search {
		position: fixed;
		z-index: 99;
		display: flex;
		background-color: @white-color;
		align-items: center;
		.paddings(17rpx, 33rpx, 24rpx, 26rpx);

		.search_box {
			.kuangao(610rpx, 70rpx);
		}

		.weui-search-bar {
			display: flex;
		}

		.weui-icon-search {
			margin-right: 8px;
			font-size: inherit;
		}

		.weui-icon-search_in-box {
			position: absolute;
			left: 0rpx;
			top: 12rpx;
			display: flex;
			align-items: center;

			.locationName {
				.fontsize(28rpx);
				font-family: PingFang SC;
				font-weight: 500;
				color: @text-color2;
				// color:#fff;
				margin: -5rpx 14rpx;
			}

			.img1 {
				.kuangao(29rpx, 29rpx);
			}

			.img2 {
				.kuangao(25rpx, 25rpx);
			}
		}

		.weui-search-bar__text {
			display: inline-block;
			font-size: 14px;
			vertical-align: middle;
		}

		.weui-search-bar__form {
			flex: auto;
			background: #F5F7FA;
			border-radius: 35rpx;
			.paddings(10rpx, 10rpx, 10rpx, 33rpx);
		}

		.weui-search-bar__box {
			position: relative;
			padding-left: 30px;
			padding-right: 30px;
			width: 100%;
			box-sizing: border-box;
			z-index: 1;
		}

		.weui-search-bar__input {
			height: 28px;
			line-height: 28px;
			font-size: 14px;
			background-color: @text-color6;
			width: 100%;
		}

		.weui-icon-clear {
			position: absolute;
			top: 0;
			right: 0;
			padding: 7px 8px;
			font-size: 0;
		}

		.weui-search-bar__label {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			border-radius: 3rpx;
			text-align: center;
			color: #9B9B9B;
			background: #FFFFFF;
			line-height: 28px;
		}

		.weui-search-bar__cancel-btn {
			margin-left: 10px;
			line-height: 28px;
			color: #09BB07;
			white-space: nowrap;
			font-size: 30rpx;
		}

		.img {
			width: 44rpx;
			height: 44rpx;
			margin-top: 36rpx;
		}

		.tipInfo {
			.kuangao(14rpx, 14rpx);
			.position(absolute, 20rpx, 34rpx, 0, auto);
			.borderradius(7rpx, 7rpx, 7rpx, 7rpx);
			background: @orange;
		}

		.search_txt {
			.fontsize(30rpx);
			font-family: PingFang SC;
			font-weight: bold;
			color: @green;
			margin-left: 23rpx;
			white-space: nowrap;
		}
	}

	.kobai {
		height: 115rpx;
	}

	.search_history {
		background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
		.borders(2rpx, @white-color);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		.borderradius(16rpx, 16rpx, 16rpx, 16rpx);
		.margins(16rpx, 24rpx, 16rpx, 24rpx);
		.paddings(40rpx, 34rpx, 40rpx, 34rpx);

		.tit {
			display: flex;
			justify-content: space-between;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #DCDFE6;

			.txt1 {
				.fontsize(34rpx);
				font-family: PingFang SC;
				font-weight: bold;
				color: @text-color2;
			}

			.img {
				.kuangao(35rpx, 37rpx);
			}
		}

		.searchTag_box {
			display: flex;
			flex-direction: row;
			width: 100%;

			.searchTag {
				display: flex;
				flex-direction: column;
				align-items: center;
				min-width: 100rpx;
				padding: 10rpx 20rpx;
				background: #F0F2F5;
				.borderradius(24rpx, 24rpx, 24rpx, 24rpx);
				.fontsize(24rpx);
				font-family: PingFang SC;
				font-weight: 500;
				color: @text-color3;
				margin-right: 16rpx;
			}
		}
	}

	.nearby-box {
		.margins(24rpx, 24rpx, 24rpx, 24rpx);
		background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
		.borders(2rpx, #FFFFFF);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		.borderradius(16rpx, 16rpx, 16rpx, 16rpx);
		.paddings(40rpx, 0, 40rpx, 0);

		.nearby {
			display: flex;
			align-items: center;
			.paddings(0, 0, 25rpx, 40rpx);
			border-bottom: 1rpx solid #DCDFE6;
			;

			.img {
				.kuangao(31rpx, 31rpx);
				margin-right: 14rpx;
			}

			.txt1 {
				.fontsize(34rpx);
				font-family: PingFang SC;
				font-weight: bold;
				color: @text-color2;
			}
		}

		.list {
			.margins(40rpx, 40rpx, 40rpx, 23rpx);
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #C0C4CC;

			.findName {
				.fontsize(30rpx);
				font-family: PingFang SC;
				font-weight: bold;
				color: @text-color1;
				margin-bottom: 27rpx;
			}

			.findD {
				position: absolute;
				right: 81rpx;
				margin-top: -27rpx;
				.fontsize(24rpx);
				font-family: PingFang SC;
				font-weight: 400;
				color: @text-color3;
			}

			.findAddre {
				.fontsize(24rpx);
				font-family: PingFang SC;
				font-weight: 500;
				color: @text-color3;
			}
		}
	}

	.searchCon {
		padding: 32rpx;
		border-bottom: 1rpx solid #DCDFE6;
	}

	.noList {
		text-align: center;
		font-size: 24rpx;
		color: #9699A6;
		margin-top: 1vh;
	}

	.order-list {
		margin-top: 24rpx;
		.order-list-item {
			.margins(auto, 24rpx, auto, 24rpx);
			background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
			.borders(2rpx, @white-color);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border-radius: 16rpx;
			margin-bottom: 27rpx;
			.paddings(39rpx, 24rpx, 33rpx, 24rpx);

			.order-list-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.margins(auto, 8rpx, 24rpx, 8rpx);
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid @text-color5;

				.siteName {
					.fontsize(34rpx);
					.kuan(340rpx);
					.yiman(1);
					font-family: PingFang SC;
					font-weight: bold;
					color: @text-color2;
				}

				.status {
					.fontsize(28rpx);
					font-family: PingFang SC;
					font-weight: 500;
				}
			}

			.order-list-center {
				position: relative;
				.margins(auto, 5rpx, auto, 5rpx);

				.order-list-center-left {
					display: flex;
					justify-content: start;
					align-items: center;

					.order-img {
						width: 160rpx;
						height: 160rpx;
						.margins(auto, 30rpx, auto, 9rpx);
					}

					.gun-number {
						.fontsize(30rpx);
						font-family: PingFang SC;
						font-weight: bold;
						color: @text-color2;
					}

					.degree {
						.fontsize(34rpx);
						font-family: DINAlternate;
						font-weight: bold;
						.margins(23rpx, auto, 20rpx, auto);
						color: @orange;

						text:nth-child(1) {
							.fontsize(24rpx);
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF5A3A;
						}

						text:nth-child(2) {
							.fontsize(30rpx);
						}
					}

					.period-time {
						.fontsize(23rpx);
						font-family: PingFang SC;
						font-weight: 400;
						color: @text-color3;
					}
				}

				.charge-type {
					.kuangao(77rpx, 40rpx);
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}

			.order-list-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.margins(22rpx, 12rpx, auto, 12rpx);

				.order-list-bottom-left {
					.fontsize(24rpx);
					font-family: PingFang SC;
					font-weight: 500;

					.order-type {
						.paddings(8rpx, 19rpx, 8rpx, 19rpx);
						color: @blue;
						background: rgba(20, 135, 250, 0.06);
						border-radius: 4rpx;
					}

					.account-type {
						.paddings(8rpx, 19rpx, 8rpx, 19rpx);
						margin-left: 14rpx;
						background: rgba(252, 114, 76, 0.06);
						color: @orange;
						border-radius: 4rpx;
					}
				}

				.operate-state {
					.kuangao(164rpx, 64rpx);
					line-height: 64rpx;
					.textalign();
					.borders(1rpx, @blue);
					border-radius: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: @blue;
				}
			}
		}
	}
</style>